<template>
	<view>
		<uv-notify ref="notify"></uv-notify>
		<view class="p-10" v-if="list.length > 0">
			<view class="address-list" v-for="item in list">
				<view class="address-list-item">
					<view class="address-list-item__info-contact" @click="clickItem(item)">
						<view class="flex bold align-center">
							<view class="address-list-item__info-contact-name">{{ item.name }}</view>
							<view class="address-list-item__info-contact-tel">{{ item.phone }}</view>
							<view class="address-list-item__info-contact-default"
								:style="{background:app.globalData.primaryColor}" v-if="item.type == 1">默认</view>
						</view>
						<view class="address-list-addr">{{ item.province + item.city + item.area + item.address }}
						</view>
					</view>
					<view class="address-list-item__info-handle">
						<uv-icon name="edit-pen" size="30" @click="editClick(item)"></uv-icon>
						<uv-icon name="trash" size="30" @click="delClick(item)"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<Loading v-if="loading"></Loading>
		<uv-empty v-else-if="list?.length == 0"></uv-empty>
		<view class="btn">
			<uv-button text="新建地址" @click="addAddress" shape="circle" :color="app.globalData.primaryColor"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh,
		onShow,
	} from '@dcloudio/uni-app'
	const app = getApp()
	const list = ref([]);
	const type = ref(null);
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	onLoad((option) => {
		getData()
		type.value = option.type
	})
	const loading = ref(true)
	const getData = () => {
		loading.value = true
		app.post('api.auth.address/get').then(res => {
			list.value = res.list
			loading.value = false
		}).catch(err => {
			loading.value = false
			console.log(err);
		})
	}
	const clickItem = (value) => {
		console.log(value)
		if (!type.value) {
			return false;
		}
		let req = {
			code: value.code,
			type: 1
		}
		app.post('api.auth.address/state', req).then(res => {
			app.vibrate()
			uni.navigateBack();
		})
		// const eventChannel = proxy.getOpenerEventChannel();
		// console.log(eventChannel, 'mmm')
		// if (eventChannel.listener?.setAddress) {
		// 	app.vibrate()
		// 	eventChannel.emit('setAddress', value);
		// 	uni.navigateBack();
		// }
	}
	const editClick = (value) => {
		console.log(value, 'Click To Edit');
		uni.navigateTo({
			url: '/pages/addressAdd/addressAdd',
			events: {
				getData
			},
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				value && res.eventChannel.emit('setFormData', value)
			}
		})
	}
	const notify = ref(null)
	const delClick = (value) => {
		app.vibrate()
		console.log(value, 'Click To Delete');
		uni.showModal({
			title: "友情提示",
			content: "您确定要删除当前地址吗?",
			confirmText: "确定删除",
			success: (res) => {
				if (res.confirm) {
					delData(value.code)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const delData = (code) => {
		app.post('api.auth.address/remove', {
			code
		}).then(res => {
			notify.value.show({
				type: 'success',
				message: '删除成功',
				duration: 1000 * 3,
				fontSize: '20rpx',
				safeAreaInsetTop: true
			});
			getData()
		})
	}
	const addAddress = () => {
		console.log('Click To Add');
		app.vibrate()
		uni.navigateTo({
			url: '/pages/addressAdd/addressAdd',
			events: {
				getData
			},
		})
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.uv-status-bar {
			height: 0 !important;
		}
	}

	.align-center {
		align-items: center;
	}

	.bold {
		font-weight: bold;
	}

	.address-list {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
		font-size: 16px;
		color: #333;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
		border-radius: 10px;

		.address-list-item {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.address-list-item__info-contact {
				display: flex;
				flex-direction: column;
				width: -webkit-fill-available;
				justify-content: flex-start;

				.address-list-item__info-contact-name {
					max-width: 145px;
					word-wrap: break-word;
				}

				.address-list-item__info-contact-tel {
					max-width: 110px;
					margin-left: 8px;
					word-wrap: break-word;
				}

				.address-list-item__info-contact-default {
					height: 16px;
					padding: 0 6px;
					margin-left: 5px;
					font-size: 12px;
					line-height: 16px;
					color: var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff));
					border-radius: 2px;
				}
			}

			.address-list-item__info-handle {
				display: flex;
				gap: 4px;
			}
		}

		.address-list-addr {
			width: -webkit-fill-available;
			font-size: 12px;
			color: #666;
		}
	}
</style>